<template>
  <div class="timetable-container">
    <!-- 选择器和输入框 -->
    <div class="controls">
      <span>教师课表</span>
      <el-input
          v-model="searchQuery"
          placeholder="请输入教师号"
          style="width: 200px; margin-left: 10px;"
          @input="fetchTimetable"
      ></el-input>
    </div>

    <!-- 提示信息或课表 -->
    <div v-if="!hasValidData" class="no-data-message">
      <p>请输入正确的班级或教师号。</p>
    </div>
    <el-table v-else :data="timeSlots" border style="width: 100%; margin-top: 20px;">
      <el-table-column label="Time" prop="time" width="120"></el-table-column>
      <el-table-column v-for="day in daysOfWeek" :key="day" :label="day">
        <template #default="scope">
          <div v-for="(course, index) in getDaySchedule(day, scope.row.time)" :key="index">
            <strong>{{ course.cname }}</strong> - {{ course.address }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import axios from "axios";

// 静态课表数据（这里用作示例，实际应用中可能是从后端获取）
let timetable = ref([]);

// 时间段（假设每天四节课）
const timeSlots = ref([
  { time: '12节' },
  { time: '34节' },
  { time: '56节' },
  { time: '78节' },
  { time: '910节'}
]);

onMounted(() => {
  fetchTimetable();
});

// 获取课表数据
async function fetchTimetable() {
  try {
    const res = await axios.get("http://localhost:8080/getTimeTableByTno", {
      params: {
        tno: searchQuery.value // 使用搜索查询作为参数
      }
    });

    if (res.data && Array.isArray(res.data)) {
      // 确保每次更新时创建一个新的数组实例，以便 Vue 能够捕捉到变化
      timetable.value = res.data.map(item => ({
        day: item.time.match(/周[一二三四五六日]/)?.[0] || '未知', // 提取星期
        time: `${item.time.match(/\d+/g)?.join('-') || '未知'}`, // 提取节次
        cname: item.cname || '未知',
        address: item.address || '未知'
      }));
    } else {
      console.error('Unexpected data format:', res.data);
      timetable.value = [];
    }
  } catch (err) {
    console.error(err);
    timetable.value = [];
  }
}

// 星期数组
const daysOfWeek = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

// 视图模式：班级课表 或 教师课表
const viewMode = ref('class');

// 搜索查询字符串
const searchQuery = ref('2020001');

// 计算属性：是否有有效数据
const hasValidData = computed(() => {
  return timetable.value.length > 0;
});

// 辅助函数：获取某天特定时间段的课程
function getDaySchedule(day, timeSlot) {
  const parsedTime = timeSlot.replace('节', ''); // 移除"节"
  return timetable.value.filter(item => item.day === day && item.time === parsedTime);
}
</script>

<style scoped>
.timetable-container {
  padding: 20px;
}

.controls {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.no-data-message {
  text-align: center;
  color: red;
  font-weight: bold;
}

/* 根据需要调整样式 */
</style>